---
title: Installa Astro manualmente
description: Come installare Astro manualmente con NPM, PNPM, o Yarn.
i18nReady: true
---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

Questa guida ti mostrerà come installare e configurare un nuovo progetto Astro manualmente.

:::tip[Preferisci un modo più rapido per iniziare?]
Segui [lo strumento CLI di creazione Astro.](/it/install/auto/) invece.
:::

#### Prerequisiti

- **Node.js** - `v18.14.1` o superiore.
- **Editor di testo** - Raccomandiamo [VS Code](https://code.visualstudio.com/) con la nostra [Estensione Ufficiale Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Terminale** - Astro viene utilizzato tramite la sua interfaccia da riga di comando (CLI).

#### Installazione

Se preferisi non usare il nostro strumento CLI automatico `create astro`, puoi impostare tu stesso il tuo progetto seguendo questa guida.

## 1. Crea la tua cartella

Crea una cartella vuota con il nome del tuo progetto, e naviga al suo interno.

```bash
mkdir il-mio-progetto-astro
cd il-mio-progetto-astro
```

Una volta all'interno della cartella, crea il file `package.json` del tuo progetto. Questo servirà a gestire le dipendenze del tuo progetto, incluso Astro. Se questo formato di file non ti è familiare, esegui il seguente comando per crearne uno.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init 
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>



## 2. Installa Astro

Per prima cosa, installa le dipendenze di un progetto Astro all'interno del tuo progetto.

:::note[Importante]
Astro deve essere installato localmente, non globalmente. Assicurati di *non* star eseguendo `npm install -g astro`, `pnpm add -g astro` oppure `yarn add global astro`.
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

Poi, sostituisci qualunque sezione segnaposto "scripts" all'interno del tuo file `package.json` con il seguente codice:

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

Userai questi script più avanti nella guida per far partire Astro ed eseguire i suoi vari comandi.

## 3. Crea la tua prima pagina

Nel tuo editor di testo, crea un nuovo file nella tua cartella al percorso `src/pages/index.astro`. Questa sarà la tua prima pagina Astro nel progetto.

Per questa guida, copia e incolla il seguente blocco di codice (inclusi i tre trattini `---`) all'interno del tuo nuovo file:

```astro title="src/pages/index.astro"
---
// Benvenuto/a ad Astro! Tutto ciò che è delimitato da questi tre trattini
// è il tuo "avantesto del componente". Non viene mai eseguito nel browser.
console.log('Questo codice viene eseguito nel tuo terminale, non nel browser!');
---
<!-- Qua sotto c'è il tuo "template del componente". È solo HTML, con
     un po' di magia per aiutarti a costruire ottimi template. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. Crea il tuo primo asset statico

Avrai anche bisogno di creare una cartella `public/` dove salvare i tuoi asset statici. Astro includerà sempre questi asset nella build finale, così da poterli referenziare in sicurezza dall'interno dei tuoi template.

Nel tuo editor di testo, crea un nuovo file nella tua cartella al percorso `public/robots.txt`. `robots.txt` è un semplice file che la maggior parte dei siti includono per dire ai bot di ricerca, come quello di Google, come trattare il tuo sito.

Per questa guida, copia e incolla il seguente blocco di codice all'interno del tuo nuovo file:

```diff title="public/robots.txt"
# Esempio: Permetti a tutti i bot di scansionare e indicizzare il tuo sito.
# Sintassi completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt?hl=it
User-agent: *
Allow: /
```

## 5. Crea il file `astro.config.mjs`

Astro viene configurato tramite il file `astro.config.mjs`. Questo file è facoltativo se non hai bisogno di configurare Astro, ma potresti comunque volerlo creare ora.

Crea il file `astro.config.mjs` alla base del tuo progetto, e copia il seguente blocco di codice al suo interno:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```

Se vuoi includere [componenti di framework UI](/it/guides/framework-components/) come quelli di React, Svelte, ecc. o usare altri strumenti come Tailwind o Partytown nel tuo progetto, qua è dove [importi e configuri manualmente le integrazioni](/it/guides/integrations-guide/).

<ReadMore>Leggi la [reference di Astro dell'API di configurazione](/it/reference/configuration-reference/) per maggiori informazioni.</ReadMore>

## 6. Aggiungi il supporto a TypeScript

TypeScript viene configurato tramite il file `tsconfig.json`. Anche se non scrivi codice TypeScript, questo file è importante affinché strumenti come Astro e VS Code sappiano come interpretare il tuo codice. Alcune funzionalità, come gli import dei pacchetti npm, non sono pienamente supportate nell'editor senza un file `tsconfig.json`. 

Se intendi scrivere codice TypeScript, è consigliato usare i template `strict` o `strictest` di Astro. Puoi vedere e confrontare i tre template di configurazione all'indirizzo [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Crea il file `tsconfig.json` alla base del tuo progetto e copia il seguente blocco di codice al suo interno. (Puoi usare `base`, `strict` o `strictest` per il tuo template di TypeScript):

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

Infine, crea il file `src/env.d.ts` per permettere a TypeScript di sapere quali tipi d'ambiente sono disponibili all'interno del tuo progetto Astro:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>Leggi la [guida di Astro al setup di TypeScrip](/it/guides/typescript/#setup) per maggiori informazioni.</ReadMore>

## 7. Prossimi passi

Se hai seguito tutti i passaggi, la cartella del tuo progetto ora dovrebbe avere questa struttura:

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json oppure `yarn.lock`, `pnpm-lock.yaml`, ecc.
- package.json
- tsconfig.json
</FileTree>

Congratulazioni, ora sei pronto/a ad usare Astro!

Se hai seguito questa guida nella sua interezza, puoi saltare direttamente allo [Step 2: Fai partire Astro](/it/install/auto/#2-fai-partire-astro-) per continuare e vedere come far partire Astro per la prima volta.
